<template>
  <div>
    <!--搜索区域-->
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-form-item>
        <a-input v-model="nickName" placeholder="请输入. . . ">
        </a-input>
      </a-form-item>
      <a-form-item  has-feedback>
        性别：<a-select v-model="sex" default-value="请选择" style="width: 70px">
          <a-select-option value="0">
            女
          </a-select-option>
          <a-select-option value="1">
            男
          </a-select-option>
          <a-select-option value="2">
            未知
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          :style="{ display: 'inline-block'}"
      >
        开始时间：<a-date-picker v-model="start" style="width: 40%" /> &nbsp;-
        <a-date-picker v-model="end" style="width: 40%" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">
          搜索
        </a-button>
      </a-form-item>
      <a-form-item
        :style="{marginRight:'10px'}"
      >
        <a-button type="primary" @click="showModal">
          添加用户
        </a-button>
      </a-form-item>
    </a-form>
    <!--表格区域-->
    <a-table :columns="columns" :data-source="data" bordered :pagination="pagination">
    <span slot="sex" slot-scope="sex">
      <a-tag v-if="sex == 1" style="background-color: #3ce2af">男</a-tag>
      <a-tag v-if="sex == 0" style="background-color: #a8ee85">女</a-tag>
       <a-tag v-if="sex == 2" style="background-color: goldenrod">未知</a-tag>
    </span>
      <span slot="status" slot-scope="text,record">
       <a-switch :default-checked="record.status" @change="onChange(record.id)" />
      </span>
      <span slot="action" slot-scope="text, record">
      <a-divider type="vertical" />
      <a @click="deleteById(record.id)">删除</a>
      <a-divider type="vertical" />
      <a-dropdown :trigger="['click']">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          更多<a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0" sl>
            <a @click="updateUserInfo(record)">修改信息</a>
          </a-menu-item>
          <a-menu-divider />
        </a-menu>
      </a-dropdown>
    </span>
    </a-table>
    <!--修改用户-->
    <div>
      <a-modal
          title="修改用户信息"
          :visible="updateState"
          :confirm-loading="confirmLoading"
          @ok="updateOK"
          @cancel="updateFail"
      >
        <template>
          <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
            <a-form-model-item has-feedback label="用户昵称" prop="pass">
              <a-input v-model="ruleForm.nickNme" type="text" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item has-feedback label="性别" prop="pass">
              <a-select v-model="ruleForm.sex"
                        default-value="请选择" style="width: 70px">
                <a-select-option value="0">
                  女
                </a-select-option>
                <a-select-option value="1">
                  男
                </a-select-option>
                <a-select-option value="2">
                  未知
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item has-feedback label="用户密码" prop="pass">
              <a-input v-model="ruleForm.password" type="text" autocomplete="off" />
            </a-form-model-item>
            <a-form-model-item has-feedback label="手机号码" prop="age">
              <a-input v-model="ruleForm.phone" />
            </a-form-model-item>
            <a-form-model-item has-feedback label="用户邮箱" prop="age">
              <a-input v-model="ruleForm.email" />
            </a-form-model-item>
          </a-form-model>
        </template>
      </a-modal>
    </div>

    <!--添加用户模块-->
    <div>
      <a-modal
          title="添加用户"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
      >
        <a-form-model  :model="addUserVo" v-bind="layout">
          <a-form-model-item has-feedback label="用户账户" prop="username">
            <a-input v-model="addUserVo.username" type="text" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="用户昵称" prop="nickname">
            <a-input v-model="addUserVo.nickName" type="text" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="用户密码" prop="password">
            <a-input v-model="addUserVo.password" type="text" autocomplete="off" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="手机号码" prop="phone">
            <a-input v-model="addUserVo.phone" />
          </a-form-model-item>
          <a-form-model-item has-feedback label="用户邮箱" prop="email">
            <a-input v-model="addUserVo.email" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: '用户账号',
    dataIndex: 'username',
    key: 'username',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'username' },
  },
  {
    title: '用户昵称',
    dataIndex: 'nickName',
    key: 'nickName',
  },
  {
    title: '性别',
    key: 'sex',
    dataIndex: 'sex',
    scopedSlots: { customRender: 'sex' },
  },
  {
    title: '用户状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    scopedSlots: { customRender: 'phone' },
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    scopedSlots: { customRender: 'email' },
  },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
const data = [

];
import {getUsers,deleteById,addUser,updateStatus,getById,updateUserInfo} from '@/services/user'
export default {
  data() {
    return {
      //分页开始
      current: 1,
      total:10,
      pagination: {
        pageNo:1,
        pageSize:10,
        showSizeChanger:true,//显示可改变每页数量
        pageSizeOptions:['10','20','50','100'],//每页数量选项
        showTotal: total => `共${total}条`,//显示总数
        onShowSizeChange: (current,pageSize) => this.onSizeChange(current,pageSize),//改变每页数量时更新显示
        onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件
        total:0//总条数
      },
      //分页结束
      data,
      columns,
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      nickName:'',
      sex:'',
      start:'',
      end:'',
      visible: false,
      confirmLoading: false,
      /*添加用户属性信息*/
      addUserVo:{
        username:'',
        nickName:'',
        password:'',
        phone:'',
        email:''
      },
      /*修改用户信息*/
      updateState:false,
      ruleForm: {
        id:'',
        nickNme: '',
        sex: '',
        password: '',
        phone:'',
        email:''
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    };
  },
  created() {
    this.getUser()
  },
  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    onPageChange(page, pageSize) {
      console.log(pageSize)
      this.pagination.pageNo = page
      this.getUser()
    },
    onSizeChange(current, size) {
      this.pagination.pageNo = 1
      this.pagination.pageSize = size
      this.getUser()
    },
    handleSubmit(e) {
      e.preventDefault();
      getUsers(this.nickName,this.sex,this.start,this.end,this.pagination.pageNo,this.pagination.pageSize).then(result=>{
        this.data = result.data.data.users
        this.pagination.total = result.data.data.total
        this.current = result.data.data.current
      })
    },
    getUser(){
      getUsers(this.nickName,this.sex,this.start,this.end ).then(result=>{
        this.data = result.data.data.users
      })
    },
    deleteById(id){
      deleteById(id).then(result=>{
        if (result.data.code === 0){
          this.getUser()
        }
        this.$message.success(result.data.msg, 3)
      })

    },
    updateUserInfo(record){
      getById(record.id).then(result=>{
        if (result.data.code === 0){
          this.ruleForm.id = result.data.data.id
          this.ruleForm.nickNme = result.data.data.nickName
          this.ruleForm.sex = result.data.data.sex
          this.ruleForm.phone = result.data.data.phone
          this.ruleForm.email = result.data.data.email
        }
      })
      this.updateState = true
      console.log(record)
    },
    onChange(id){
      updateStatus(id).then(result=>{
        if (result.data.code === 0) {
          this.$message.success(result.data.msg,3)
          this.getUser()
        }
      })
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e)
      addUser(this.addUserVo.username,this.addUserVo.nickName,this.addUserVo.password,this.addUserVo.phone,this.addUserVo.email).then(result=>{
        if (result.data.code === 0){
          this.confirmLoading = true;
          setTimeout(() => {
            this.visible = false;
            this.confirmLoading = false;
            this.getUser()
          }, 2000);
          this.$message.success(result.data.msg,3)
        }else {
          this.$message.error(result.data.msg,3)
        }

      })
    },
    handleCancel(e) {
      console.log(e)
      console.log('Clicked cancel button');
      this.visible = false;
    },
    updateOK(e){
      console.log(e)
      updateUserInfo(this.ruleForm.id,this.ruleForm.nickNme,this.ruleForm.sex,this.ruleForm.password,this.ruleForm.phone,this.ruleForm.email).then(result=>{
        if (result.data.code === 0){
          setTimeout(() => {
            this.updateState = false;
            this.confirmLoading = false;
            this.getUser()
          }, 2000);
          this.$message.success(result.data.msg,3)
        }else {
          this.$message.error(result.data.msg,3)
        }
      })

    },
    updateFail(e){
      console.log(e)
      console.log('Clicked cancel button');
      this.updateState = false;
    },
  },
};
</script>
